<template>



    <div class="single-box">
        <div class="dog">
            🐶
        </div>
        <div >
             <span style="font-size: 20px;line-height: 40px"> 单身</span>
            <div class="single-text"> 第
                <span>{{day}}</span> 天 <span> {{hour}} </span> 时 <span>{{mill}} </span> 分 <span> {{sec}}</span> 秒
            </div>
        </div>

    </div>
</template>

<script>
    import {computed, reactive, ref} from "@vue/reactivity";
    import {MyDate} from "@/assets/js/FormatDate";
    import {onMounted} from "@vue/runtime-core";





    export default {
        name: "SingleDog",
        props:{
          start:{
              type:Date,
              default:new Date(2018,2,25,15,30)
          }
        },
        setup(props,context){
            let myDate=reactive(new MyDate(props.start))
            let day=computed(()=>{
                return myDate.day
            })
            let hour=computed(()=>{
                if(myDate.hour>=24){
                    myDate.day+=1
                    myDate.hour=0
                }
                return myDate.hour
            })
            let mill=computed(()=>{
               if(myDate.mill>=60){
                   myDate.hour+=1
                   myDate.mill=0
               }
                return myDate.mill
            })
            let sec=computed(()=>{
               if(myDate.sec>=60){
                    myDate.mill+=1
                    myDate.sec=0

                }
                return myDate.sec
            })


            onMounted(()=>{

                setInterval(()=>{

                    myDate.sec+=1

                },1000)

            })


            return{
                day,
                hour,
                mill,
                sec

            }
        }
    }
</script>

<style scoped lang="less">
    .single-box{
        width: 100%;
        height: 100%;
        .dog{
            font-size: 90px;
        }
        .single-text{
            span{
                font-size: 25px;
                color:#CE5463;
            }
        }
    }


</style>